<template>
  <div>
    <div class="modal">
      <div class="modal-bg" @click="editCloses"></div>
      <div id="hous" class="hous">
        <div class="rele-titles" id="rele-titles">
          <span @click="infocli" :class="{'title_class' : jibeninfo}">
          房源编辑
          </span>
          <span @click="piccli" :class="{'title_class' : jibenpic}">
          照片上传
          </span>
          <div class="btnClose">
            <div>
              <img @click="editCloses" src="../assets/img/tub.png" alt="">
            </div>

          </div>

        </div>
        <ul v-show="jibeninfo" id="hous-list" class="hous-list">
          <!-- 小区 -->
          <li>
            <div class="pub-title"><span class="quar">小区</span></div>
            <div class="pub-w">
              <div class="city">
                <p>省份</p>
                <p>城市</p>
                <p>城区</p>
                <p>位置</p>
                <p>楼盘字典</p>
                <p>分区</p>
                <p>楼栋</p>
                <p>单元</p>
                <p>楼层</p>
                <p>房号</p>
                <p>总层</p>
              </div>
              <div class="city">
                <!-- 省份 -->
                <p>


                  <select v-model="listss.province_code"   placeholder="请选择" @change="handelGetRrovinceChange" style="width: 95%;height: 26px;">
                    <option
                      v-for="item in provinceListData"
                      :key="item.CODE"
                      :label="item.region_name_c"
                      :value="item.CODE"

                    >
                    </option>
                  </select>
                </p>
                <!-- 省份 -->

                <!-- 城市 -->
                <p>
                  <select v-model="listss.city_code"  placeholder="请选择" @change="handelGetCityChange" style="width: 95%;height: 26px;">
                    <option
                      v-for="item in cityListData"
                      :key="item.CODE"
                      :label="item.region_name_c"
                      :value="item.CODE">
                    </option>
                  </select>
                </p>
                <!-- 城市 -->

                <!-- 城区 -->
                <p>
                  <select v-model="listss.area_code"   placeholder="请选择" @change="handelAreaChange" style="width: 95%;height: 26px;">
                    <option
                      v-for="item in areaListData"
                      :key="item.CODE"
                      :value="item.CODE">
                      {{item.region_name_c}}
                    </option>
                  </select>
                </p>
                <!-- 城区 -->

                <p><input type="" name=""   v-model="listss.position" style="width: 95%;height: 24px;margin-top: 1px;border: 1px solid #a0a0a0;"></p>

                <!-- 楼盘 -->
                <p>
                  <select    v-model="listss.premises_id"   @change="handelTowersChange"  style="width: 95%;height: 26px;">
                    <option
                      v-for="(item) of towersListData"
                      :key="item.id"
                      :value="item.id">
                      {{item.name}}
                    </option>
                  </select>
                </p>
                <!-- 楼盘 -->

                <!-- 分区 -->
                <p>
                  <select v-model="listss.partition_id"   placeholder="请选择" @change="handelZoneChange"  style="width: 95%;height: 26px;">
                    <option
                      v-for="item in zoneListData"
                      :key="item.id"

                      :value="item.id">
                      {{item.title}}
                    </option>
                  </select>
                </p>
                <!-- 分区 -->

                <!-- 楼栋 -->
                <p>
                  <select v-model="listss.building_id"   placeholder="请选择" @change="handelBuildingChange"  style="width: 95%;height: 26px;">
                    <option
                      v-for="item in buildingListData"
                      :key="item.id"

                      :value="item.id">
                      {{item.title}}
                    </option>
                  </select>
                </p>
                <!-- 楼栋 -->

                <!-- 单元 -->
                <p>
                  <select v-model="listss.unit_id" placeholder="请选择"  @change="handelUnitChange"  style="width: 95%;height: 26px;">
                    <option
                      v-for="item in unitListData"
                      :key="item.id"
                      :label="item.title"
                      :value="item.id">
                    </option>
                  </select>
                </p>
                <!-- 单元 -->

                <!-- 楼层 -->
                <p>
                  <select v-model="listss.floor_id" placeholder="请选择"    @change="handelFoorChange"  style="width: 95%;height: 26px;">
                    <option
                      v-for="item in floorListData"
                      :key="item.id"
                      :label="item.title"
                      :value="item.id">
                    </option>
                  </select>
                </p>
                <!-- 楼层 -->

                <!-- 房号 -->
                <p>
                  <select v-model="listss.room_num_id"  placeholder="请选择"  style="width: 95%;height: 26px;">
                    <option v-for="item of roomListData" :key="item.id" :value="item.id" >
                      {{item.title}}
                    </option>
                  </select>
                </p>
                <!-- 房号 -->

                <p><input type="" name="" v-model="listss.all_floor" style="width: 95%;height: 24px;margin-top: 1px;border: 1px solid #a0a0a0;"></p>
              </div>
            </div>
          </li>
          <!-- 小区 end-->

          <!-- 户型 -->
          <li>
            <div class="pub-title">户型</div>
            <div class="pub-w">
              <ul class="layout">
                <li>

                  <input style="width:100px;height: 24px;border: 1px solid #a0a0a0;" v-model="listss.ht_room_num">
                  <span>房</span>
                </li>
                <li>
                  <input style="width:100px;height: 24px;border: 1px solid #a0a0a0;" v-model="listss.ht_office_num">
                  <span>厅</span>
                </li>
                <li>
                  <input style="width:100px;height: 24px;border: 1px solid #a0a0a0;"  v-model="listss.ht_toilet_num">
                  <span>卫</span>
                </li>
                <li>
                  <input style="width:100px;height: 24px;border: 1px solid #a0a0a0;" v-model="listss.ht_balcony_num">
                  <span>阳台</span>
                </li>
                <li>
                  <input  style="width:100px;height: 24px;border: 1px solid #a0a0a0;">
                  <span>车库</span>
                </li>
                <li>
                  <input style="width:45%;margin-left:10px;height: 24px;border: 1px solid #a0a0a0;"  v-model="listss.key_code">
                  <span>房源编号</span>
                </li>
              </ul>
            </div>
          </li>
          <!-- 户型 end-->

          <!-- 面积 -->
          <li>
            <div class="pub-title">面积</div>
            <div class="pub-w">
              <ul class="layout">
                <li>
                  <input type="" name="" v-model="listss.acreage" style="width: 68%;height: 24px;border: 1px solid #a0a0a0;" placeholder="请输入内容"><span style="left: 19.5%;position: absolute;">㎡</span>
                </li>
                <li>
                  <select v-model="listss.orientation_id" placeholder="请选择"
                             style="width:75%;height: 26px; float:left;margin-right:10px;">


                    <option
                      v-for="item in building.orientation"
                      :key="item.id"
                      :label="item.title"
                      :value="item.id">
                    </option>
                  </select>
                  <span>朝向</span>
                </li>
                <li style="width:100px;">
                  <select v-model="listss.type_id" placeholder="请选择"
                             style="width:75%;height: 26px; float:left;margin-right:10px;" filterable>
                    <option
                      v-for="item in Downlist.type"
                      :key="item.id"
                      :label="item.title"
                      :value="item.id">
                    </option>
                  </select>
                  <span>类型</span>
                </li>
                <li>
                  <input type="" name="" v-model="listss.building_year" style="width: 50%;height: 24px;border: 1px solid #a0a0a0;" placeholder="请输入内容"><span >建房年代</span>
                </li>
                <li>
                  <select name="" id="" v-model="listss.is_has_key" style="width: 50px; height: 24px;">
                    <option value="0">不是</option>
                    <option value="1">是</option>
                  </select>
                  <span>是否为钥匙房源</span>
                </li>
              </ul>
            </div>
          </li>
          <!-- 面积 end-->
        </ul>
        <ul v-show="jibeninfo" class="hous-list hous-list1">
          <!-- 交易 -->
          <li>
            <div class="pub-title">交易</div>
            <div class="pub-w">
              <ul class="layout">
                <li>
                  <select v-model="listss.transaction_id" placeholder="请选择"
                             style="width:72%;height: 26px; float:left;margin-right:10px;" filterable>
                    <option
                      v-for="item in Downlist.transaction"
                      :key="item.id"
                      :label="item.title"
                      :value="item.id">
                    </option>
                  </select>
                  <span>交易</span>
                </li>
                <li>
                  <span>状态</span>
                  <select v-model="listss.status" placeholder="请选择"
                             style="width:70%;height: 26px; float:left;margin-right:10px;" filterable>
                    <option
                      v-for="item in Downlist.status"
                      :key="item.id"
                      :label="item.title"
                      :value="item.id">
                    </option>
                  </select>
                </li>
                <li>
                  <select v-model="listss.is_public" placeholder="请选择"
                             style="width:70%;height: 26px; float:left;margin-right:10px;" filterable>
                    <option
                      v-for="item in Downlist.public_private"
                      :key="item.id"
                      :label="item.title"
                      :value="item.id">
                    </option>
                  </select>
                  性质
                </li>
                <li>
                  <input type="" name="" v-model="listss.property_cost" placeholder="元/㎡"  style="width: 63%;height: 24px;border: 1px solid #a0a0a0;"><span style="left: 63%;position: absolute;">物业费</span>
                </li>
              </ul>
            </div>
          </li>
          <!-- 交易 end-->

          <!-- 售价 -->
          <li>
            <div class="pub-title">售总价</div>
            <div class="pub-w">
              <ul class="layout">
                <li>
                  <input type="" name="" v-model="listss.sell" style="width: 65%;height: 24px;border: 1px solid #a0a0a0;"  placeholder="请输入内容"><span style="left: 18.5%;position: absolute;">万元</span>
                </li>
                <li>
                  <input type="" name="" v-model="listss.sell_average" placeholder="元/㎡" style="width: 65%;height: 24px;border: 1px solid #a0a0a0;"><span style="left: 33%;position: absolute;">售单价</span>
                </li>
                <li>
                  <input type="" name="" placeholder="万元" v-model="listss.rent" style="width: 65%;height: 24px;border: 1px solid #a0a0a0;"> <span style="left: 48%;position: absolute;">租价</span>
                </li>
                <li>
                  <input type="" name="" v-model="listss.sell_min_average" placeholder="元/㎡" style="width: 65%;height: 24px;border: 1px solid #a0a0a0;"><span style="left: 63%;position: absolute;">押金</span>
                </li>
              </ul>
              <!--<div class="right-li" style="width:18%">-->
                <!--<div class="right-input">-->

                  <!--<select  v-model="followValue.mode_id"  placeholder="请选择" style="width: 95%;height: 26px;">-->
                    <!--<option-->
                      <!--v-for="item in followVlaueList"-->
                      <!--:key="item.id"-->
                      <!--:label="item.title"-->
                      <!--:value="item.id">-->
                    <!--</option>-->
                  <!--</select>-->
                <!--</div>-->
                <!--<span style="line-height:25px;">跟进方式</span>-->
              <!--</div>-->
              <div class="right-li"  style="float: left;width:20%;">
                <div class="right-input" style="width:120px;">
                  <input v-model="listss.owner_name" style="padding-left: 10px;height: 26px;">
                </div>
                <span style="line-height:27px;">业主姓名</span>
              </div>
              <div class="right-li"  style="float: left;width:20%;">
                <div class="right-input" style="width:120px;">
                  <input v-model="listss.owner_phone" style="padding-left: 10px;height: 26px;" >
                </div>
                <span style="line-height:27px;">业主电话</span>
              </div>
              <div class="right-li"  style="float: left;width:20%;">
                <div class="right-input" style="width:180px;">
                  <el-switch
                    v-model="formData.sort"
                    active-value="1"
                    inactive-value="0"
                    active-text="置顶"
                    inactive-text="不置顶">
                  </el-switch>
                </div>
              </div>
            </div>
          </li>
          <!-- 售价 end-->
          <!-- 现状 -->
          <div class="pub-right">
            <div class="right-li">
              <div class="right-title">现状</div>
              <div class="right-input" style="width:65%;">
                <select v-model="listss.present_situation_id" placeholder="请选择"
                           style="width:90%; float:left;margin-right:10px;height: 26px;" filterable>
                  <option
                    v-for="item in Downlist.situation"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                  </option>
                </select>
              </div>
            </div>
            <div class="right-li">
              <div class="right-title">产权</div>
              <div class="right-input">
                <select v-model="listss.property_right_id" placeholder="请选择"
                           style="width:90%; float:left;margin-right:10px;height: 26px;" filterable>
                  <option
                    v-for="item in Downlist.property_right"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                  </option>
                </select>
              </div>
            </div>
            <div class="right-li">
              <div class="right-title">家电</div>
              <div class="right-input">
                <select v-model="listss.house_electric_id" placeholder="请选择"
                           style="width:90%; float:left;margin-right:10px;height: 26px;" filterable>
                  <option
                    v-for="item in Downlist.house_electric"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                  </option>
                </select>
              </div>
            </div>
            <div class="right-li">
              <div class="right-title">装修</div>
              <div class="right-input">
                <select v-model="listss.renovation_id" placeholder="请选择"
                           style="width:90%; float:left;margin-right:10px;height: 26px;" filterable>
                  <option
                    v-for="item in Downlist.renovation"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                  </option>
                </select>
              </div>
            </div>
            <div class="right-li">
              <div class="right-title">家具</div>
              <div class="right-input">
                <select v-model="listss.house_furnish_id" placeholder="请选择"
                           style="width:90%; float:left;margin-right:10px;height: 26px;" filterable>
                  <option
                    v-for="item in Downlist.house_furnish"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                  </option>
                </select>
              </div>
            </div>
            <div class="right-li">
              <div class="right-title">证件</div>
              <div class="right-input">
                <select v-model="listss.card_type_id" placeholder="请选择"
                           style="width:90%; float:left;margin-right:10px;height: 26px;" filterable>
                  <option
                    v-for="item in Downlist.card_type"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                  </option>
                </select>
              </div>
            </div>
            <div class="right-li">
              <div class="right-title">佣金</div>
              <div class="right-input">
                <select v-model="listss.commission_id" placeholder="请选择"
                           style="width:90%; float:left;margin-right:10px;height: 26px;" filterable>
                  <option
                    v-for="item in Downlist.commission"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                  </option>
                </select>
              </div>
            </div>
            <div class="right-li">
              <div class="right-title">看房</div>
              <div class="right-input">
                <select v-model="listss.look_house_id" placeholder="请选择"
                           style="width:90%; float:left;margin-right:10px;height: 26px;" filterable>
                  <option
                    v-for="item in Downlist.look_house"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                  </option>
                </select>
              </div>
            </div>
            <div class="right-li">
              <div class="right-title">委托方式</div>
              <div class="right-input">
                <select v-model="listss.entrust_method" placeholder="请选择"
                           style="width:90%; float:left;margin-right:10px;height: 26px;" filterable>
                  <option
                    v-for="item in Downlist.entrust_method"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                  </option>
                </select>
              </div>
            </div>
            <div class="right-li">
              <div class="right-title">委托时间</div>
              <div class="right-input">
                <el-date-picker style="width:90%;border: 1px solid #a0a0a0;" v-model="listss.entrust_date"
                                type="date"
                                placeholder="选择日期">
                </el-date-picker>
              </div>
            </div>

          </div>
          <!-- 现状 end-->
        </ul>
        <!-- 底部 -->
        <div v-show="jibeninfo" class="footer">
          <ul class="hous-list hous-list1">
            <!--<li>-->
              <!--<div class="pub-title">跟进内容</div>-->
              <!--<div class="pub-w">-->
                <!--<ul class="layout">-->
                  <!--<li style="width:82%!important">-->
                    <!--<textarea v-model="followValue.content"></textarea>-->
                  <!--</li>-->
                <!--</ul>-->
              <!--</div>-->
            <!--</li>-->
            <li>
              <div class="pub-title">房源概况</div>
              <div class="pub-w">
                <ul class="layout">
                  <li style="width:82%!important">
                    <textarea v-model="listss.survey"></textarea>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
          <div class="footer-right">
            <div class="footer-li">
              <span>向系统推荐该房源</span>

              <el-checkbox v-model="listss.is_recommend"></el-checkbox>
            </div>
            <div class="footer-li">
              <span>发布到我的微店</span>
              <el-checkbox v-model="listss.is_sent_shop" true-label='1' false-label='0'></el-checkbox>
            </div>
            <div class="footer-b">
              <div class="footer-b-li">
                <div class="footer-title">经纪人</div>
                <div class="footer-input">
                  <input type="" name="" v-model="listss.agent_user" disabled style="width: 75%;height: 24px;padding-left: 10px;">
                </div>
              </div>
              <div class="footer-b-li">
                <div class="footer-title">组别</div>
                <div class="footer-input">
                  <input type="" name="" v-model="listss.group" disabled style="width: 75%;height: 24px;padding-left: 10px;">
                </div>
              </div>
              <div class="footer-b-li">
                <div class="footer-title">门店</div>
                <div class="footer-input">
                  <input type="" name="" v-model="listss.store" disabled style="width: 75%;height: 24px;padding-left: 10px;">
                </div>
              </div>
              <div class="footer-b-li">
                <div class="footer-title">区域</div>
                <div class="footer-input">
                  <input type="" name="" v-model="listss.department" disabled style="width: 75%;height: 24px;padding-left: 10px;">
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 底部 end-->
        <!--上传图片 -->
        <div v-show="jibeninfo" class="Upload">
          <div class="footer-btn">
            <el-button type="primary">短信给他</el-button>
            <el-button @click="submit" type="primary">保存该房源</el-button>
          </div>
          <!-- 按钮 end-->
        </div>
        <div v-show="jibenpic">
          <!-- 上传图片 -->
          <div class="upload">
            <div class="upload">
              <!--<img src="../assets/img/home.png" alt="">-->
              <div>
                <button :class="{img_color:changeImg === index}" v-for="(item,index) in typeTitle" @click="changeImage(index)">{{item.title}}</button>
              </div>
              <h2>请选择类型后再上传图片</h2>
              <div class="upload">
                <el-upload
                  class="upload-demo"
                  ref="upload"
                  action="http://kf.wuyoufang.cn/index/house_file"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :on-success="testImg"
                  accept="*"
                  :data="file_data"
                  :headers="headers"
                  :auto-upload="false" multiple>
                  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                  <!--<div slot="tip" class="el-upload__tip">只能上传视频文件，且不超过100M</div>-->
                </el-upload>
              </div>
            </div>

          </div>
          <!-- 上传图片 end-->
        </div>
      </div>
    </div>

  </div>
</template>
<script type="text/babel">
  // import Modal from './modal';

  export default {

    components: {
      // Modal
    },
    props: {
      building:{

      },
      LDmodal:{
        type:Function
      },
      editCloses: {
        type: Function
      },
      ids: {
        type: Number
      },
      listss: {
        type: Object
      }
    },
    data() {
      return {
        formData:{
          sort:false,
        },
        getNotice:{
          type:Function
        },
        changeImg:0,
        typeTitle: [
          {title:'照片'},
          {title:'视频'}
        ],
        headers:{token:'666'},
        file_data:{
          file_index:'',
          type_id:0
        },
        croppa5: {
          name:'',
          type:0,
          file_index:'',
        },
        jibeninfo: true,
        jibenpic: false,
        Reco:[],
        // Modalshow: false,
        isdisplay:true,
        Followshow:false,
        isdisplays:false,
        Entryshow:true,
        // 下拉
        // 房

        // followValue:{
        //   mode_id:""
        // },

        rooms: [],


        // 厅
        office: [],
        // 卫
        wei: [
        ],
        // 阳台
        balcony: [
        ],
        clearFiles:'',
        status:'',

        // 车库
        Garage: [],
        Downlist: {}, //性质
        partition: [],
        room: '',
        checked: true,
        floor: [],
        SetDada:{},
        buil: [],
        premises: '',
        unit: [],
        proper: [],
        id: '',
        // 照片上传
        dialogImageUrl: '',
        dialogVisible: false,
        // 省份
        prov: [],
        city: [],
        followVlaueList:[],
        //提示请选择
        dicMsg:{
          id:0,
          msg:'请选择'
        },
        housesList:[],
        handelProvChangeFig:false, //重置所有信息的的判断条件

        provinceListData:[], //省级数据
        cityListData:[], //城市数据
        areaListData:[],  //城区数据
        towersListData:[], //楼盘数据
        zoneListData:[], //分区数据
        buildingListData:[], //楼栋数据
        unitListData:[], //单元数据
        floorListData:[],  //楼层数据,
        roomListData:[],  //房间号数据
        isFing:true  //判读是否发起请求

      }
    },
    computed: {
      SSid() {
        return this.ids
      },
      eeeee() {
        return this.listss
      }
    },
    methods: {
      testImg(response,file,fileList){
       //上传图片成功后的函数
      },
      handleRemove(file, fileList) {
       //不知道这是个什么鬼
      },
      handlePreview(file) {
        //这个也不知道是什么鬼
      },
      changeImage(i){
        //清除
        this.changeImg = i;
        this.$refs.upload.clearFiles();
      },
      submitUpload() {
        //图片或视频提交函数
        this.file_data.file_index = this.listss.file_index;
        this.file_data.type_id = this.changeImg + 1;
        this.headers.token = localStorage.token;
        this.croppa5.file_index = this.listss.file_index;
        this.croppa5.type = this.changeImg + 1;
        console.log(this.croppa5);
        this.$refs.upload.submit();
      },



      //获取跟进内容
      getFollowValue(id){
        let tash = this;
        //获取跟进列表
        this.$http.post('/index/house_up/mode').then((res)=>{
          tash.followVlaueList= res.data;


        });

        //http://house.cn/index/house_up/1
        // //根据id获取房源跟进方式
        // this.$http.get('/index/house_up/'+id).then(({data})=>{
        //
        //
        //
        //   tash.followValue.id = id;
        //   try {
        //     tash.followValue.content = data.content;
        //     tash.followValue.mode_id = data.mode_id;
        //   }catch (e) {
        //
        //   }
        //
        //
        // });
      },


      // 切换样式
      infocli() {
        this.jibeninfo = true;
        this.jibenpic = false;
        this.$refs.upload.clearFiles();

      },
      piccli() {
        this.jibeninfo = false;
        this.jibenpic = true;
      },

      //房源跟进
      Follow(){
        this.isdisplay=false
        this.isdisplays=true
        this.Followshow=true
        this.Entryshow=false
      },
      // 房源录入
      Entry(){
        this.isdisplay=true
        this.isdisplays=false
        this.Entryshow=true
        this.Followshow=false
      },

      // 设置下拉列表
      SetDownList() {
        let that = this;
        that.$http.get('/index/house/save_select_item')
          .then(function (res) {
            that.Downlist = res.data

          })
          .catch(function (err) {
            console.log(err);
          })
      },





      /**省市县区楼盘分区楼栋单元联动开始 */

      //获得省级数据
      handelGetRrovince(){
        let _this = this;
        this.$http.get('/newapi/Area/getAreaRegion', {params: {country_code: "CN",}})
          .then(function ({data}){

            _this.provinceListData = data.res;

          })
          .catch(function (err) {
            console.log(err);
          })
      },

      //省级change事件
      handelGetRrovinceChange(){
        this.isFing = false;
        this.cityListData = []; //设置城市数据为空
        this.areaListData = []; //设置城区数据为空
        this.towersListData = []; //设置楼盘数据为空
        this.zoneListData = []; //设置分区数据为空
        this.buildingListData = []; //设置楼栋数据为空
        this.unitListData = []; //设置单元数据为空
        this.floorListData = [];  //设置楼层数据为空,
        this.roomListData = [];  //设置房间号数据为空

        //调用获取城市数据
        this.handelGetCity();
      },


      //获得城市数据
      handelGetCity(){
        let _this = this;
        this.$http.get('/newapi/Area/getAreaRegion', {
          params:{
            country_code: "CN",
            upper_region:_this.listss.province_code
          }
        })
          .then(function ({data}) {
            _this.cityListData = data.res;
          })
          .catch(function (err) {
            console.log(err);
          })
      },

      //城市change事件
      handelGetCityChange(){
        this.isFing = false;

        this.areaListData = []; //设置城区数据为空
        this.towersListData = []; //设置楼盘数据为空
        this.zoneListData = []; //设置分区数据为空
        this.buildingListData = []; //设置楼栋数据为空
        this.unitListData = []; //设置单元数据为空
        this.floorListData = [];  //设置楼层数据为空,
        this.roomListData = [];  //设置房间号数据为空
        //调用城区数据
        this.handelGetArea();
      },

      //获得城区数据
      handelGetArea(){
         let _this = this;
          this.$http.get('/newapi/Area/getAreaRegion', {
              params: {
                country_code: "CN",
                upper_region: _this.listss.city_code
              }
          })
            .then(function ({data}) {
              _this.areaListData = data.res;
            })
            .catch(function (err) {
              console.log(err);
            })

      },

      //城区change事件
      handelAreaChange(){
        this.isFing = false;
        this.towersListData = []; //设置楼盘数据为空
        this.zoneListData = []; //设置分区数据为空
        this.buildingListData = []; //设置楼栋数据为空
        this.unitListData = []; //设置单元数据为空
        this.floorListData = [];  //设置楼层数据为空,
        this.roomListData = [];  //设置房间号数据为空
        //调用楼盘事件
        this.handelGetTowers();
      },

      //获取楼盘数据
      handelGetTowers(){

        let _this = this;
        _this.$http.get('/index/premises/search',{
          params:{
            area_code:_this.listss.area_code
          }
        })
          .then(function (res){
             _this.towersListData =  res.data;


          })
          .catch(function (err) {
            console.log(err);
          })

      },

      //楼盘change事件
      handelTowersChange(){
        this.isFing = false;
        this.zoneListData = []; //设置分区数据为空
        this.buildingListData = []; //设置楼栋数据为空
        this.unitListData = []; //设置单元数据为空
        this.floorListData = [];  //设置楼层数据为空,
        this.roomListData = [];  //设置房间号数据为空
        console.log(this.unitListData);
        //调用分区函数
        this.handelGetZone();
      },

      //获取分区数据
      handelGetZone(){
        let _this = this;
        this.$http.get('/newapi/Premisespartition/getdong',{
          params:{
            premises_id:_this.listss.premises_id
          }
        }).then((res)=>{
          _this.zoneListData = res.data.res;


        }).catch((err)=>{
          console.log(err);
        })
      },

      //分区change事件
      handelZoneChange(){
        this.isFing = false;
        this.buildingListData = []; //设置楼栋数据为空
        this.unitListData = []; //设置单元数据为空
        this.floorListData = [];  //设置楼层数据为空,
        this.roomListData = [];  //设置房间号数据为空

        //调用楼栋函数
        this.handelGetBuilding();
      },

      //获得楼栋数据
      handelGetBuilding(){

        let _this = this;
        _this.$http.get('/newapi/Premisesbuilding/getdong',{
          params:{
            premisespartition_id:_this.listss.partition_id
          }
        }).then(({data})=>{
            _this.buildingListData = data.res;

        })
      },
      //楼栋change事件
      handelBuildingChange(){
        this.isFing = false;
        this.unitListData = []; //设置单元数据为空
        this.floorListData = [];  //设置楼层数据为空,
        this.roomListData = [];  //设置房间号数据为空
        //调用单元函数
        this.handelGetUnit();
      },


      //获取单元数据
      handelGetUnit(){

          let _this = this;
        _this.$http.get('/newapi/Premisesunit/getdanyuan', {params: {premisesbuilding_id: _this.listss.building_id}})
          .then(function ({data}) {
            _this.unitListData = data.res
          })
          .catch(function (err) {
            console.log(err);
          })
      },

      //单元change事件
      handelUnitChange(){
        this.isFing = false;
        this.floorListData = [];  //设置楼层数据为空,
        this.roomListData = [];  //设置房间号数据为空
        //调用楼层函数
        this.handelGetFloor();
      },

      //获取楼层数据
      handelGetFloor(){
        let _this = this;
        _this.$http.get('/newapi/Premisesfloor/getlouceng', {params: {premisesunit_id: _this.listss.unit_id}})
          .then(function ({data}){
            _this.floorListData = data.res
          })
          .catch(function (err) {
            console.log(err);
          })
      },

      //楼层change事件
      handelFoorChange(){
        this.isFing = false;
        this.roomListData = [];  //设置房间号数据为空
        //调用房号函数
        this.handelGetRoom();
      },

      //获得房号数据
      handelGetRoom(){
        let _this = this;

        this.$http.get('/newapi/Premisesfloor/getlouceng', {params: {premisesunit_id: _this.listss.floor_id}})
          .then(function ({data}){
            _this.roomListData = data.res;
          })
          .catch(function (err) {
            console.log(err);
          })
      },



      // 提交房源
      submit() {
        let that = this;
        that.listss.is_sent_shop = that.listss.is_sent_shop*1
        that.$http.post('/index/house/edit/'+that.SSid,that.listss)
          .then(function (res) {

            if(res.data.status === 1){
              that.editCloses();
              that.formData = {};
              that.getNotice();
              that.$store.state.messageString = res.data.msg;
              that.LDmodal();


            }else { console.log('提交成功了么????');
              that.$store.state.messageString = res.data.msg;
              that.LDmodal();
            }
          })
          .catch(function (err) {
            console.log(err);
          })


        // that.followValue['house_id'] = that.followValue['id'];
        //新增跟进内容
        // this.$http.post('/index/house_up',{
        //   ...that.followValue
        // }).then(function(res){
        //
        // });

      }

    },

    mounted() {
      this.SetDownList();
    },
    watch:{
      listss(){
      this.listss.is_sent_shop = this.listss.is_sent_shop == 1?true:false
      },
      provinceListData(){
        //监视provinceListDate数据  注：数据改变了表示可以发送城市请求了
        //调用获取城市函数
        this.isFing === true?(this.handelGetCity()):"";

      },
      cityListData(){
        //监视城市数据变化  注 数据改变了表示可以发送城区请求了
       //调用城区数据

        this.isFing === true?(this.handelGetArea()):"";

      },
      areaListData(){
        //监视城区变化 注 数据改变了表示可以发送楼盘请求了
        //调用楼盘数据

        this.isFing === true?(this.handelGetTowers()):"";
      },
      towersListData(){
        //监视楼盘数据变化  注 数据改变了表示可以发送分区请求了
       //发送分区数据
        this.isFing === true?(this.handelGetZone()):"";

      },
      zoneListData(){
        //监视分区数据变化   注 数据改变了表示可以发送楼栋请求了
        this.isFing === true?(this.handelGetBuilding()):"";
      },
      buildingListData(){
        //监视楼栋数据变化 注 数据改变了表示可以发送单元请求了

        this.isFing === true?(this.handelGetUnit()):"";

      },
      unitListData(){
        //监视单元数据变化 注 数据改变了表示可以发送楼层请求了

       this.isFing === true?(this.handelGetFloor()):"";
      },
      floorListData(){
        //监视楼层数据变化  注 数据改变了表示可以发送房号请求了
        this.isFing === true?(this.handelGetRoom()):"";
      }

    }
  }
</script>

<style scoped>

  .modal{
    background-color:rgba(0,0, 0, 0.2) !important;
    position: fixed;
    z-index:99;
  }
  #hous{
    width:1000px;
    height:450px;
    overflow:hidden;
    overflow-y:scroll;

  }

  #rele-titles{
    width:100%;
    position: relative;
  }


  .btnClose{
    position: absolute;
    right:30px;
    width:20px;
    height:50px;
    top:0;
  }

  .hous-list{
    margin-top:0;
  }
  .btnClose div img{
    vertical-align:middle;
    cursor: pointer;
  }


  .footer-btn button {
    padding: 10px 15px;
    color: #fff;
    border: none;
    border-radius: 5px;
  }

  .footer-btn button:nth-child(1) {
    margin-right: 10px;
  }

  .footer-btn {
    width: 97%;
    float: left;
    padding-left: 45%;
  }

  .footer-btn:nth-child(2) {
    float: right;
  }

  .video {
    width: 15%;
    float: left;
    box-sizing: border-box;
    border-right: 1px solid #eee
  }

  .Upload-left {
    width: 15%;
    float: left;
    box-sizing: border-box;
    border-right: 1px solid #eee
  }

  .Upload {
    width: 98%;
    float: left;
    padding: 1%;
    background: #fff;
    margin-top: 5px;
  }

  .footer-input {
    width: 70%;
    float: left;
  }

  .footer-input input {
    width: 70%;
    height: 27px;
    float: left;
    margin-left: 5%;
    border: 1px solid #d3d3d3;
  }

  .footer-title {
    width: 30%;
    float: left;
  }

  .footer-b-li {
    width: 50%;
    margin-top: 20px;
    float: left;
  }

  .footer-b {
    margin-top: 20px;
  }

  .footer-li span {
    margin-right: 10px;
    line-height: 27px;
    display: inline-block;
  }

  .footer-li {
    width: 50%;
    float: left;
  }

  .layout li textarea {
    width: 80%;
    height: 80px;
    border-radius: 5px;
    border: 1px solid #d3d3d3;
  }

  .footer {
    width: 100%;
    float: left;
    position: relative;
    margin-top: 5px;
    background: #fff
  }

  .footer-right {
    width: 30%;
    position: absolute;
    right: 0;
    top: 20px;
  }

  .right-input {
    width: 67%;
    float: left;
  }

  .right-input input {
    width: 85%;
    height: 0px;
    float: left;
    margin-left: 5%;
    box-sizing: border-box;
    border: 1px solid #a0a0a0;

  }
  .title_class {
    background: #fff;
    color: #415dba;
  }

  .upload {
    width: 100%;
    padding: 0 1%;
    /*float: left;*/
    box-sizing: border-box;
    border-top: 5px solid #f9f9f9;
    padding-bottom: 10px;
    margin-top: 30px;
  }
  .upload button{
    /*border-radius: 5px;*/
    /*padding: 5px 10px;*/
    border: none;
  }
  .upload button:hover{
    background: #55a532;
  }
  .right-title {
    width: 33%;
    line-height: 27px;
    float: left;
  }

  .pub-right {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 32%;
    padding-left: 1%;
    float: right;
    box-sizing: border-box;
    border-left: 5px solid #f9f9f9;

  }

  .right-li {
    width: 50%;
    margin-top: 10px;
    float: left;
  }

  .hous-list1 {
    margin-top: 5px;
    position: relative;
  }

  .layout {
    width: 100%;
    float: left;
  }

  .layout li {
    width: 16.666666667% !important;
    float: left;
    line-height: 27px;
    text-align: left;
    margin-top: 0 !important;
  }

  .layout li input {
    width: 58%;
    float: left;
    padding-left: 5%;
    font-size: .9em;
    margin-right: 10px;
    height: 27px;
    border: 1px solid #d3d3d3;
  }

  .quar {
    margin-top: 27px;
    display: inline-block;
  }

  .city p input {
    width: 100%;
    float: left;
    height: 27px;
    border: 1px solid #d3d3d3;
  }

  .city {
    width: 100%;
    float: left;
  }

  .city p {
    font-weight: bold;
    line-height: 27px;
    width: 9.0909090909%;
    float: left;
    text-align: center;
  }

  .pub-w {
    width: 90%;
    float: left;
    margin-top: 50px;
    padding-right: 3%;
  }

  .pub-title {
    width: 7%;
    line-height: 27px;
    font-weight: bold;
    float: left;
    text-align: center;
  }


  .hous-list {
    width: 100%;
    float: left;
    background: #fff;
    padding-bottom: 10px;
    text-align: center;
  }
  .hous-lists{
    width: 100%;
    float: left;
    height: 139px;
    background: #fff;
    padding-bottom: 10px;
    text-align: center;
  }

  .hous-list li {
    width: 100%;
    float: left;
  }

  .hous-list1{
    padding:0 !important;
  }

  .hous {
    background: #f9f9f9;
    width: 75%;
    left: 15%;
    top: 15%;
    position: absolute;
    z-index: 10;
    height: 500px;
    border-radius: 5px;
    overflow: hidden;
    overflow-y: auto;
    box-shadow: #e8e7e7 0px 0px 10px;
  }
  .rele-titles {
    line-height: 50px;
    font-size: 2em;
    padding: 0 1%;
    color: #000;
    background: #f5f5f7;
    z-index: 9;
    border-bottom: 1px solid #d3d3d3;

  }
  .rele-titles span{
    cursor:pointer;
  }
  select{
    cursor:pointer;
  }
  input{
    cursor:pointer;
  }
  textarea{
    padding-left: 10px;
    cursor:pointer;
  }
  /*照片按钮*/
  .img_color {
    cursor:pointer;
    width: 50px;
    height: 30px;
    border-radius: 3px;
  }

</style>
